<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1,minimum-scale=1" />
    <title>发布活动-活动管理</title>
    <c:import url="${appRoot}/public/head-tag.jsp"/>
    <style>
        .plugin-item {
            font-size: 14px;
            /* width: 33%; */
            display: inline-block;
            padding: 10px;
            border: 1px solid #d8d8d8;
            margin: 5px 0 5px 10px;
            width: 100px;
            height: 140px;
            vertical-align: top;
            border-radius: 2px;
        }
        .plugin-item>a{
            display:block;
        }
        .plugins {
            overflow: hidden;
            font-size: 0;
            margin-left: -10px;
        }
        .plugins>li{
            font-size:14px;
        }
        .empty-tip {
            padding: 10px 20px;
        }
        .plugin-logo {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
        
        .plugin-title {
            text-align: center;
            font-size: 16px;
            text-align: center;
            display: block;
        }
        
        .plugin-note {
            display: none;
        }
        
        .plugin-item:hover {
            background: #f7f7f7;
        }
        .link{
            color:rgb(91, 175, 191);
            text-decoration: underline;
        }
		.title {
		    text-align: center;
		    font-size: 18px;
		    padding: 0 10px 10px;
		    font-weight: 700;
		    text-align: left;
		}
    </style>
</head>
<body>
    <c:import url="${appRoot}/public/header.jsp"/>
    <section class="container">
        
        <%--<c:set var="sidebar" scope="request" value="content"/>--%>
        <%--<c:set var="navbar" scope="request" value="action"/>--%>
        <%--<c:import url="${appRoot}/public/sidebar.jsp"/>--%>
        
        <div class="content">
            <div class="content-top">
    			<h3 class="content-title">
    				<div class="bread">
    					<a href="/Manager/web/action/listPage">活动管理</a>
    					<span>&gt;</span>
    					<span>活动发布</span>
    				</div>
    			</h3>
                <div class="content-action">
                    <a href="/Manager/web/plugin/list/view#1" class="action-item icon-edit" title="管理模板">管理模板</a>
                </div>
            </div>
            <div class="content-main">
                <section class="content-item" data-template="list/items" id="content">
                    <div class="content-item-top">
                        <form action="/Manager/web/plugin/mine?type=1" method="get" autocomplete="off">
                        </form>
                    </div>
                    
                    <div class="content-item-block">
                    <h3 class="title">请选择活动模板</h3>
                        <ul class="plugins" id="plugins">
                            <li class="empty-tip">正在加载...</li>
                        </ul>
                    </div>
                    
                </section>
            </div>
        </div>
    </section>
    
   <script id="list/items" type="text/template">
        {{if  !code }}
           <li class="empty-tip">响应错误！</li>
        {{else if code!=200}}
            <li class="empty-tip">{{msg || '查询错误！'}}</li>
        {{else if !data.list || data.list.length==0}}
            <li class="empty-tip">没有可用的活动模板，您可以<a class="link" href="/Manager/web/plugin/list/view#1">去扩展商店看看»</a></li>
        {{else}}
            {{each data.list as item}}
                <li class="plugin-item">
                    <a href="/Manager/web/action/editor?type={{item.type | getAliases}}&appid={{item.id}}">
                        <div class="plugin-logo" style="background-image:url({{item.logo | getImage}})"></div>
                        <div class="plugin-content">
                            <h3 class="plugin-title">{{item.name}}</h3>
                        </div>
                    </a>
                </li>
            {{/each}}
        {{/if}}
    </script>
    
   <script src="/pages/assets/js/require.all.js"></script>
   <script>
        requirejs([
            'artTemplate',
            
            'utils.converter',  
            'vender.types', 
            'vender.actions', 
            
            'jquery.common'
        ], 
        function(template, Converter, Field, Action){
            
            template.helper('getImage', function(img){
                return Action.get('image.logo', img)
            })
            
            template.helper('getTypeName', function(t){
                return Field.PluginType.get(t).name || '未知类型'
            })
            
            template.helper('getAliases', function(t){
                return Field.Plugins.get(t).aliases;
            })
            
            var MC = new Converter({
                'data':{
                    'list':[{
                        'pluginId':'plg_id',
                        'id':'row_guid',
                        'name':'plg_name',
                        'logo':'plg_logo',
                        'desc':'plg_desc',
                        'type':'exType',
                        'version':'plg_version',
                        'status':'pluginRoom_status',
                        'createTime':'pluginRoom_create_time',
                        'updateTime':'pluginRoom_updated_time'
                    }]
                }
            })
            
            var App={
                
                alert : function(tip){
                    return Modal.alert(tip);
                },
                
                confirm:function(tip){
                    return Modal.confirm(tip)
                },
                
                operate:function(url, data){
                    
                    var dtd = $.Deferred();
                    
                    $.post(url, data, function(res){
                        var result = Action.transformResponse(res);
                        var code = result.code;
                        if(code==200){
                            dtd.resolve(result.data)
                        }else{
                            var msg = result.msg || '数据获取失败！';
                            dtd.reject(msg)
                        }
                    })
                    .fail(function(e, type, msg){
                        dtd.reject(type + msg)
                    })
                    
                    return dtd;
                },
                
                initEvents:function(){
                    
                    var app = this;
                    
                    $('[data-template]').ajaxLoad({
                        dataFilter:function(result){
                            var res =  {
                                code:result.code,
                                msg:result.msg,
                                data:{
                                    list:result.data
                                }
                            }
                            res =  MC.convert(res);
                            return res;
                        },
                        resultBox:function(){
                            return $('#plugins');
                        },
                        pager:false,
                        onFail:function(xhr, type, msg){
                            app.alert(type + msg)
                        }
                    })
                    
                    $('#tab-labels').tabs({
                        onClick:function(){
                            var $this = $(this);
                            var type = $this.data('type');
                            $('#pluginType').val(type).parents('form').trigger('submit');
                        }
                    })
                    
                    
                    $("body").on("click","[data-action]",function(){
                        var $this=$(this);
                        var action=$this.data("action");
                        var data=$this.data("params");
                        
                        if(action=="item.install"){
                            app.confirm('确定要安装吗？')
                            .then(function(){
                                var api = Action.get('item.install', data);
                                app.operate(api, data)
                                .then(function(data){
                                    $('#content').reload();
                                })
                                .fail(function(msg){
                                    app.alert(msg);
                                })
                            })
                        }
                        else if(action=="item.uninstall"){
                            app.confirm('确定要删除吗？')
                            .then(function(){
                                var api = Action.get('item.uninstall', data);
                                app.operate(api, data)
                                .then(function(data){
                                    $('#content').reload();
                                })
                                .fail(function(msg){
                                    app.alert(msg);
                                })
                            })
                        }
                        return false;
                    })
                },
                
                init : function(){
                    this.initEvents();
                }
            }
            
            App.init();
        })
   </script>
    </body>
</html>